<template>
	<view style="width:100%;height:100%;" id="amap" :dataList='dataList' :change:dataList='amap.lineChange'></view>
	<!-- 必须有宽高 -->
</template>

<script>
	// 逻辑层
	export default {
		props: ['linePath'],
		data() {
			return {
				map: null,
				ownerInstanceObj: null, //service层对象
				marker1: "",
				marker: "",
			}
		},
		computed: {
			dataList() {
				return this.linePath
			}
		},
	}
</script>

<script module="amap" lang="renderjs">
	// 视图层
	export default {
		props: ['linePath'],
		mounted() {
			if (typeof window.AMap === 'function') {
				this.initAmap()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=74bfcbd67721b7a7706d27ac188df973'
				script.onload = this.initAmap.bind(this)
				document.head.appendChild(script)
			}
		},

		methods: {
			// updateEcharts(newValue, oldValue, ownerInstance, instance) {
			// 	// 监听 service 层数据变更
			// 	console.log(newValue)
			// },
			lineChange(val) {
				this.getItem(val)
			},
			initAmap(oldValue) {
				this.map = new AMap.Map('amap', {
					resizeEnable: true,
					center: [114.205173, 30.63413], //地图中心点
					zoom: 10 //地图显示的缩放级别
				})
			},
			getItem(item) {
				let polyline = null
				let linePath = item
				let that = this
				if (linePath.length != 0) {


					setTimeout(function() {

						// // // 起点
						// this.marker = new AMap.Marker({
						// 	position: [linePath[0].lon, linePath[0].lat],
						// 	icon: '/static/img/start.png'
						// })

						// // 终点
						// this.marker1 = new AMap.Marker({
						// 	position: [linePath[linePath.length - 1].lon, linePath[linePath
						// 		.length - 1].lat],
						// 	icon: require('/static/img/end.png')
						// })

						// let markerList = [this.marker, this.marker1]

						// that.map.add(markerList)
						
						let polylineArr = linePath.map((items) => {
							return [items.lon, items.lat];
						});

						if (polylineArr && polylineArr.length > 0) {
							polyline = new AMap.Polyline({
								map: that.map,
								path: polylineArr,
								showDir: true,
								strokeColor: "#3e8af6", //线颜色
								strokeWeight: 7, //线宽
								lineJoin: "round", // 折线拐点连接处样式
							});
							that.map.setFitView();
						}
					}, 3000);


				}
			}
		}
	}
</script>
